<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 实现简单的留言板  </title>
    <script src="../libs/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2> {{title }} </h2>
        <div>
            <p>展示留言</p>
            <div v-for="(item,index) in list" :key="index">
                {{index}}. {{item.title}}  
                <p><button v-on:click="list.splice(index,1)"  >删除</button> <button v-on:click="updateItem(item,index)">修改</button></p>
            </div>
        </div>
        <hr>
        <div>
            <p>添加留言</p>
            <p>
                <input type="text" v-model="text" placeholder="请输入">
                <button v-on:click="addList">提交留言</button>
            </p>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:"#app", 
            data:{
                title:"Vue - 留言板 ",
                list:[
                    {
                        title:"原生JS"
                    },
                    {
                        title:"原型proto"
                    },
                    {
                        title:"jquery"
                    },
                    {
                        title:"ajax"
                    }
                ],
                text:''
            },
            methods:{
                addList(){
                    this.text && this.list.push({
                        title:this.text 
                    })
                    this.text = ''
                },
                updateItem(item,index){
                    var title = window.prompt(index,item.title)
                    console.log(title) 
                    if(title && title !=item.title){
                        // this.list.splice(index,1) // 删除 
                        this.list.splice(index,1,{title})   // 替换修改
                    }
                }
            }
        })
    </script>
</body>
</html>